<template>
  <view>
    <scroll-view
      class="video_main"
      scroll-y="true"
      @scrolltolower="handleScrolltolower"
      enable-flex
    >
      <view
        class="video_item"
        v-for="item in videowp"
        :key="item.id"
        @click="handleGoVideo(item)"
      >
        <image :src="item.img" mode="widthFix" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videowp: [],
      hasMore: true,
    };
  },
  methods: {
    /* 跳转到播放视频(图片点击事件) */
    handleGoVideo(item) {
        // 1、将数据存到全局共享中
        getApp().globalData.video = item;
        // 2、页面跳转
        uni.navigateTo({
             url: '/pages/videoPlay/index',
        });
        console.log("hello world")
    },
    /* scroll-view触底事件 */
    handleScrolltolower() {
      if (this.hasMore) {
        this.urlObject.params.skip += this.urlObject.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "没有数据了哦",
          duration: 2000,
          icon: "none",
        });
      }
    },
    /* 获取接口里的数据 */
    getList() {
      this.request({
        url: this.urlObject.url,
        data: this.urlObject.params,
      }).then((result) => {
        // console.log(result);
        if (result.res.videowp.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: "没有数据了哦",
            duration: 2000,
            icon: "none",
          });
          return;
        }
        this.videowp = [...this.videowp, ...result.res.videowp];
      });
    },
  },
  /* 接收父组件传过来的数据 */
  props: {
    urlObject: Object,
  },
  /* 组件生命周期函数，监听组件的挂载 */
  mounted() {
    // console.log("debug => ", this.urlObject);
    this.getList();
  },
  /* 监听数据变化 */
  watch: {
    urlObject() {
      // console.log("debug => ", this.urlObject);
      this.videowp = [];
      // this.urlObject.params.skip = 0;
      this.getList();
    },
  },
};
</script>

<style lang="scss">
.video_main {
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 36px);
  .video_item {
    width: 33.33%;
    border: 3rpx solid #fff;
    image {
    }
  }
}
</style>